<template>
    <div class="shopcar-container">
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner shopcarhead" v-for="(item,index) in goodlist" :key="item.id">
                        <!-- 这里用了共同存储器store的内容将此时的状态同步到  store中。 -->
						<mt-switch
                             v-model="$store.getters.getgoodselected[item.id]"
                             @change="selectedchange(item.id,$store.getters.getgoodselected[item.id])" 
                             >
                        </mt-switch>

                        <img class="shopcarimg1" :src="item.path">
                        <div class="goodinfo">
                            <h3>{{item.title}}</h3>
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <!-- 这里出现问题加了this,this是指这个组件的实例对象，报错当然是因为这个组件上没有store属性了。 -->
                                <numberbox :goodcount="$store.getters.getgoodcount[item.id]"
                                :goodid="item.id"></numberbox>
                                <!-- 删除1.删除购物车页面的购物信息，2删除store中的这条商品的信息 -->
                                <span @click="remove(item.id ,index)">删除</span>
                            </p>
                        </div>
					</div>
				</div>
			</div>
         <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner shopcarbody">
						<p>总计（不含运费）</p>
                        <div class="settlement">
                            <p class="settle-p1">已购选商品<span>{{$store.getters.getgoodcountandamount.count}}</span>件，总价：<span>￥{{$store.getters.getgoodcountandamount.amount}}</span></p>
                            <mt-button type="danger">去结算</mt-button>
                        </div>
					</div>
				</div>
			</div>
       
    </div>
</template>

<script>
import numberbox from '../newsinfosubcomp/shopcarnumberbox.vue'
export default {
    data(){
        return{
            goodlist:[
                {id:1,path:"https://img.alicdn.com/bao/uploaded/i5/TB1OCArhZfpK1RjSZFORAi6nFXa_025954.jpg",title:"小米Note16G双网通版",sell_price:2000},
                {id:2,path:"https://img.alicdn.com/bao/uploaded/i5/TB1OCArhZfpK1RjSZFORAi6nFXa_025954.jpg",title:"da米Note16G双网通版",sell_price:2300},
                {id:3,path:"https://img.alicdn.com/bao/uploaded/i5/TB1OCArhZfpK1RjSZFORAi6nFXa_025954.jpg",title:"ga米Note16G双网通版",sell_price:2400},
            ]
        }
    },
    created(){
        this.getgoodlist()
    },
    methods:{
        getgoodlist(){
            var idarr=[]
            // 在idarr中存入store的car中的id；获取每个购物车商品中的id
            this.$store.state.car.forEach(element => {
                idarr.push(element.id)
            });
           if(idarr.length<0){
               return;
           }
            this.$http.get('api/good/getshopcarlist/'+ idarr.join(',')).then(result=>{
                if(result.body.status===0){
                    this.goodlist=result.body.message
                }
            })
        },
        remove(id,index){
            this.goodlist.splice(index,1)
            this.$store.commit("removeshoponecar",id)
            
        },
        // 这是将switch转换的状态同步到store中。
        selectedchange(id,val){
            // console.log(id+"------"+val)
            // 出了一个问题，commit是出发store的mutations的方法的。
            this.$store.commit('updatagoodselected',{id,selected:val})
        }
    },
    components:{
        numberbox
    }
}
</script>

<style lang="scss" scoped>
    .shopcarhead{
        display:flex;
        justify-content: space-around;
        align-items: center;
        .shopcarimg1{
            height:70px;
        }
        .goodinfo{
            h3{
                font-size: 16px;
                text-align: center;
            }
            p{
                span{
                    color: red;
                    font-weight: bold;
                     padding: 3px;
                }
                :last-child{
                    color: blue;
                }
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-top: 12px;
            }
        }

    }
    .shopcarbody{
        .settlement{
            display:flex;
            justify-content: space-between;
            align-items:center;
            .settle-p1{
                align-self:flex-end;
                span{
                    color: red;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            
        }
        
    }
</style>

